<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/content.css" />
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

  </head>
  <body>
    <div id="app" class="all">
      <div class="container">
        <!-- 头部 -->
        <div class="header">
          <div class="item" v-for="(item,index) in i_Title" :key="index">
            <div class="title">
              <p v-if=index=='todayBook'>今日订单</p>
              <p v-if=index=='todaySale'>今日销售</p>
              <p v-if=index=='saleTotal'>销售总额</p>
              <p v-if=index=='profitTotal'>利润统计</p>
            </div>
            <div class="bottom">
              <div class="left">{{item}}</div>
              <div class="right"><img src="./img/圣诞屋.png" alt="" /></div>
            </div>
          </div>
        </div>
        <!-- 中间部分 -->
        <div class="middle">
          <!-- 左侧月统计 -->
          <div class="left">
            <div class="title">月统计</div>
            <div class="item-left">
              <div id="chart4" class="allnav"></div>
            </div>
          </div>
          <!-- 右侧销售排行 -->
          <div class="right">
            <div class="title">商品销售排行</div>
            <div class="echart wenzi">
              <div class="gun">
                <p>排名</p>
                <p>商品名称</p>
                <p>销量</p>
              </div>
              <div id="FontScroll" class="myscroll">
                <ul>
                  <li v-for="(item,index) in i_GoodsSale" :key="index">
                    <div class="fontInner clear">
                      <p>
                        <b>{{index+1}}</b>
                      </p>
                      <p>{{item.name}}</p>
                      <p>{{convertToTenThousand(item.num)}}</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <div class="left">
            <div class="title">周统计</div>
            <div class="allnav" id="chart_6" style="height: 3rem"></div>
          </div>
          <div class="right">
            <div class="title">订单情况</div>
            <div class="bottom-b">
              <div id="book" class="allnav"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script src="js/fontscroll.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/content.js"></script>
    <script src="js/jquery.min.js"></script>


  </body>
</html>
